{extend name="common/index"}
{block name="content"}
<div class="layui-row">
    <form id="searchForm" class="layui-form layui-form-pane tpl-form-search" method="post" action="" onkeydown="if(event.keyCode=='13'){reloadTable('#searchForm');return false;}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类目名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="cat_name" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-normal" data-type="reload" onclick="reloadTable('#searchForm');">搜索</a>
                    <a class="layui-btn" href="{:url('edit')}">新增</a>
                    <a class="layui-btn layui-btn-danger">删除</a>
                </div>
            </div>
        </div>
    </form>
</div>

<table id="catTable" lay-filter="catTable"></table>

<script type="text/html" id="operating">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs"  lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
</script>

{/block}

{block name="script"}
<script type="text/javascript">
    var form = null;
    layui.use(['form','laydate', 'table'], function () {
        form = layui.form;
        var laydate = layui.laydate
            ,table = layui.table
            ,$ = layui.jquery;

        /*注册日期，执行一个laydate实例*/
        laydate.render({elem: '#create_begin'});
        laydate.render({elem: '#create_end'});

        //表格数据渲染
        tableIns = table.render({
            elem: '#catTable'
            ,url: '{:url("getDataList")}'
            ,page:true
            ,limit: table_limit
            ,limits: table_limits
            ,cols: [[
                {type:'numbers', title:'序号', width:80}
                ,{field:'cat_name_text', title:'名称'}
                ,{field:'cat_type_text', title:'特殊类别', width:100}
                ,{field:'location_text', title:'前端位置', width:100}
                ,{title:'更改排序', align:'center', width: '15%', templet: function (data) {
                    return '<div class="layui-btn-group">' +
                        '<a class="layui-btn layui-btn-primary layui-btn-xs" onclick="changeSort('+data.cat_id+',\'asc\', \'{:url("changeSort")}\');"><i class="layui-icon layui-icon-up"></i></a>' +
                        '<a class="layui-btn layui-btn-primary layui-btn-xs" onclick="changeSort('+data.cat_id+',\'desc\', \'{:url("changeSort")}\');"><i class="layui-icon layui-icon-down"></i></a>' +
                        '</div>';
                }}
                ,{title:'操作', toolbar: '#operating', align:'center', width: '15%'}
            ]]
            ,where: getFormJson('#searchForm')
        });

        //监听工具条
        table.on('tool(catTable)', function(obj){
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('子类目也将被删除，确定继续吗？', function(index){
                    $.post('{:url("delete")}',{id:data.cat_id}, function (result) {
                        layer.close(index);
                        if (result.code) {
                            reloadTable('#searchForm');
                        } else {
                            layer.alert(result.msg, {icon:2});
                        }
                    }, 'json');
                });
            } else if (obj.event === 'edit') {
                window.location.href = 'edit?cat_id='+data.cat_id;
            }
        });
    });

</script>

{/block}